<template>
  <div class="home" id="home">
    <navbar @toIndex="toIndex" @login="login"></navbar>
    <sidebar @liClick1="liClick1" @liClick2="liClick2"></sidebar>
    <container>
      <template v-slot:container="scope">
        <act-list :acts="acts['actlist'].list"></act-list>
      </template>
    </container>
    <paginator :pgnum="acts.pagenum" @changepage="cgPage" :is-change-class="laststep"></paginator>
  </div>
  <Login ref="loginDialog" @closelogin="closelogin"></Login>
</template>

<script>
import {getActList} from "@/network/home";
import {findCreator,findType} from "@/network/side";
import Navbar from "@/components/Navbar";
import Sidebar from "@/components/Sidebar";
import Container from "@/components/Container";
import Paginator from "@/components/Paginator";
import ActList from "@/components/ActList";
import {computed} from "vue";
import Login from "@/components/dialog/Login";
import $store from "@/store";
export default {
  name: 'Home',
  components: {
    Login,
    ActList,
    Navbar,
    Sidebar,
    Container,
    Paginator,
  },
  data() {
    return {
      acts: {
        'actlist': {page: 1, list: []},
        'pagenum':[]
      },
      currentpageno:1,
      currentfuc:this.getActLists,
      laststep:'index',//记录上一次操作是请求哪里的数据

    }
  },
  created() {
    this.getActLists();
  },

  methods:{
    getActLists(num=1) {
      getActList(num).then(res => {
        this.acts['actlist'].page = res.page;
        // console.log(this.acts['actlist'].page);
        this.acts['actlist'].list = JSON.parse(res.pagelist);
        this.acts.pagenum = res.pagenum;
      })
    },
    findCreators(creator,id=1){
      findCreator(creator,id).then(res=>{
        this.acts['actlist'].page = res.page;
        this.acts['actlist'].list = JSON.parse(res.pagelist);
        this.acts.pagenum = res.pagenum;
      })
    },
    findTypes(type,id=1){
      findType(type,id).then(res=>{
        this.acts['actlist'].page = res.page;
        this.acts['actlist'].list = JSON.parse(res.pagelist);
        this.acts.pagenum = res.pagenum;
      })
    },
    cgPage(index){
      //前一页
      if(index===-1){
        if(this.currentpageno !== this.acts.pagenum[0]){
          this.currentpageno--;
        }
        //后一页
      }else if(index===-2){
        if(this.currentpageno !== this.acts.pagenum[this.acts.pagenum.length-1]){
          this.currentpageno++;
        }
      }else{
        this.currentpageno=index+1;
      }
      //通过前一次确定的数据类型，实现分页的数据统一
      if(this.laststep==='index'){
        this.currentfuc(this.currentpageno);
      }else{
        this.currentfuc(this.laststep,this.currentpageno);
      }


    },
    liClick1(val,index){
      // console.log('Home---ok');
      // console.log(val,index);
      if(this.laststep !== val){
        this.laststep = val;
        this.currentfuc = this.findTypes;
        this.findTypes(val,index);
      }
    },
    liClick2(val,index){
      // console.log('Home---ok');
      // console.log(val,index);
      if(this.laststep !==val){
        this.laststep = val;
        this.currentfuc = this.findCreators;
        this.findCreators(val,index);
      }
    },
    toIndex(){
      if(this.laststep !== 'index'){
        this.laststep = 'index';
        this.currentfuc = this.getActLists;
        this.getActLists();
      }
    },
    login(){
      this.$store.state.loginVisible = true;
      console.log('Home--',this.$store.state.loginVisible)
      this.$refs.loginDialog.open();
    },
    closelogin(){
      this.$store.state.loginVisible = false;
      console.log('Home--',this.$store.state.loginVisible)
      this.$refs.loginDialog.close();
    }
  },
  computed: {
    showActs() {
      return this.acts['actlist'].list
    }
  },
}
</script>

<style scoped>
.home {
  position: relative;
  height: 100vh;
}

</style>